<!doctype html>

<head>
    <link rel="stylesheet" href="css/game.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<script src="code/chapter/16_game.js"></script>
<script src="code/levels.js"></script>

<body onload="load()" style="background-color: #2a2a2a;" class="contanier">

    <div style="z-index: -1;">
        <script>
            runGame(GAME_LEVELS, DOMDisplay);
        </script>
    </div>


    <div id='gameStatus' class="gameStatus">
        <p>登录状态:{{status}} </p>
        <div v-if="!status">
            <span>用户名：</span>
            <input v-model="userName"><br>
            <span>密码：</span>
            <input v-model="userPwd"><br>
            <button @click="login()">登录</button>
            <button @click="regist()">注册</button>
        </div>
        <span>头像：</span>
        <img style="width:50px;height:50px" :src="url"><br>
        <input v-if="status" name="file" type="file" value="上传图片" @change="updateFile($event)"><br>
        <p>当前关卡:{{level}}</p>
        <p>金币:{{coin}}</p>
        <p>剩余生命:<span v-for="count in life"><img src="assets/Tiles/tile_0044.png"></span></p>
        <p>时间：{{time}}</p>
        <div v-show="gameOver" class="gameOver-Dialog">
            <h2>Game Over!</h2>
            <p>您的游戏数据：</p>
            <p>获取金币数：{{result.coin}}</p>
            <p>通过关卡：{{result.level}}</p>
            <p>共计消耗时间：{{result.time}}</p>
            <button @click="closeDia()">确认</button>
        </div>
    </div>
    <div class="ranking-list" id='rank'>
        <p>
            排行榜：
            <hr>
        </p>
        <p><span>排名</span><span>头像</span><span>用户</span><span>得分</span><span>时间</span></p>
        <p v-for="(item,index) in rankList" :key="index">
            <span>{{index+1}}</span>
            <img style="width:25px;height:25px"   :src="item.url"></img>
            <span>{{item.user_name}}</span>
            <span>{{item.score}}</span>
            <span>{{item.time}}</span>
        </p>
    </div>
    
    <div class="comment" id='comment'>
        <p>
            评论区：
            <hr>
        </p>
        
        <div v-for="(item,index) in commentList">
            <span>用户名：{{item.user_name}}</span>
            <span>时间：{{getTime(item.create_time)}}</span>
            <div>评论：{{item.comment}}</div>
            <hr>
        </div>

        <div>
            <input v-model="comment"></input>
            <button @click='postComments()'>评论</button>
        </div>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./code/index.js"></script>